<template>
  <div class="add-blog" id="add-blog">
    <div class="title">
      <h1>写博客</h1>
    </div>
    <div class="content">
      <form v-if="!isSubmitted">
        <div class="wrapper">
          <label>主题：</label>
          <input type="text" v-model="blog.title" value="title">
        </div>

        <div class="wrapper main-content">
          <label>内容：</label>
          <textarea name="blog.content" id="" cols="30" rows="10" v-model="blog.content"></textarea>
        </div>

        <div class="wrapper category">
          <label>分类：</label>
          <ul>
            <li>
              <label>Vue.js</label>
              <input type="checkbox" v-model="blog.categories" value="Vue.js" >
            </li>
            <li>
              <label>React.js</label>
              <input type="checkbox" v-model="blog.categories" value="React.js">
            </li>
            <li>
              <label>Node.js</label>
              <input type="checkbox" v-model="blog.categories" value="Node.js">
            </li>
            <li>
              <label>Angular4</label>
              <input type="checkbox" v-model="blog.categories" value="Angular4" >
            </li>
          </ul>
        </div>
        <div class="wrapper">
          <label>作者：</label>
          <input type="text" name="author" value="blog.author" v-model="blog.author">
        </div>
        <!--提交事件而不重载页面-->
        <button class="button-warn" v-on:click.prevent="post()">发布博客</button>
      </form>

    </div>

    <div class="suc" v-if="isSubmitted">
      <span>您的博客发布成功，感谢。</span>
    </div>

    <!--分割线-->
    <div class="line"></div>
    <div class="preview">
        <div class="title-wrapper">
          <h3>博客预览</h3>
        </div>
        <div class="content">
          <span><i>主题：</i>{{ blog.title }}</span>
          <span><i>内容：</i><br>{{ blog.content }}</span>
          <span><i>分类：</i>
              <ul>
                <li v-for="category in blog.categories" >{{ category }}&nbsp;/&nbsp;</li>
              </ul>
          </span>

          <span><i>作者：</i>{{ blog.author }}</span>
        </div>

    </div>
  </div>
</template>

<script>
  import Axios from 'axios'

  export default {
    name: 'add-blog',
    data() {
      return {
        blog: {
          title: '',
          content: '',
          author: '',
          categories: [],
        },
        isSubmitted: false
      }
    },
    methods: {
      post: function () {
        var dialogue = confirm("确认提交?");
        if (dialogue === true) {
          Axios.post('/posts.json',this.blog)
            .then((res) =>{
              this.isSubmitted = true;
            })
        } else {
          return false;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" src="./AddBlog.less"></style>
